<template>
    <div>
        <a-row>
            <a-col :span="8">
                <div id="logo" @click="goToHome">
                    <el-image :src="logo" fit="scale-down" style="width: 60%; height: 60%" />
                </div>
            </a-col>
            <a-col :offset="8" :span="8">
                <a-steps :current="props.current" :items="items" :percent="60" label-placement="vertical" />
            </a-col>
        </a-row>

    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { AStep } from "@/model/UIComponent.ts";
import logo from "@/assets/img/logo.jpg";
import router from "@/router/router.ts";


const props = defineProps({
    current: {
        type: Number,
        default: 0,
    },
});

const items = ref<AStep[]>([
    {
        title: "购物车",
        description: "我的购物车",
    },
    {
        title: "结算",
        description: "填写核对订单信息",
    },
    {
        title: "支付",
        description: "成功支付订单",
    },
]);

const goToHome = () => {
    router.push({
        name: "Home",
    });
};
</script>

<style lang="scss" scoped>

</style>